<!--
* @Author: 杨小龙/Yangxiaolong
* @Description: component_name ；
* @Date: 2021-00-00 00:00:00
-->
<template>
  <div ref="chartRef" class="chart-container"></div>
</template>
<script setup lang="ts">
import { shallowRef, onMounted, watch, type PropType } from "vue";
import echarts from "./index.ts";
import type { ECOption } from "./index.ts";

const props = defineProps({
  option: {
    type: Object as PropType<ECOption>,
    default: () => {},
  },
  loading: Boolean,
});

const chartRef = shallowRef<HTMLElement | null>(null);
const chart = shallowRef<echarts.ECharts | null>(null);

const setChartOption = (
  option: ECOption,
  notMerge?: boolean,
  lazyUpdate?: boolean
) => {
  if (chart.value) {
    chart.value.setOption(option, notMerge, lazyUpdate);
  }
};

const initChart = () => {
  if (!props.option) return;
  chart.value = echarts.init(chartRef.value);
  setChartOption(props.option);
};

onMounted(() => {
  initChart();
});

watch(
  () => props.option,
  () => {
    setChartOption(props.option);
  }
);

defineExpose({
  setChartOption,
});
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
